<template>
    <div class="contentPage">
        <div class="pageTitle">回款统计</div>
        <Search :data="params.searchData" @search="getSearch"/>
        <div class="tableBox">
            <div style="text-align: left;font-size: 16px">
                <span>汇总统计：</span>
                <span style="margin-right: 24px" v-if="params.counts?.dateRange && params.counts?.dateRange[0]">日期范围：{{getDate(params.counts.dateRange)}}</span>
                <span style="margin-right: 24px">总回款金额：{{params.counts.totalBackMoney}}</span>
                <span>平均回款金额：{{params.counts.avgBackMoney}}</span>
            </div>
            <a-table style="margin-top: 12px" :dataSource="params.dataSource" :columns="params.columns" row-key="id"
                     :pagination="{
                pageSize: 20
                     }">
            </a-table>
<!--            <a-pagination style="margin-top: 12px" show-size-changer v-model:current="params.page"-->
<!--                          :total="params.total" @showSizeChange="onShowSizeChange" @change="onShowPageChange"/>-->
        </div>
    </div>
</template>
<script setup>
import {reactive, onMounted } from 'vue'
import {capitalList, getStatistics} from '../../../api/project.js'
import Search from '../../../components/search/index.vue'
const params = reactive({
    visible: false,
    lookVisible: false,
    lookData: [],
    editId: '',
    page: 1,
    pageSize: 20,
    total: 11,
    counts:{},
    selectedRowKeys: [],
    formState: {
        wonerIdcardImage:[null,null],
        userIdcardImage: [null,null],
        otherFileUrl:[{fileText:'',file:[],name:''}]
    },
    searchData: [
        {name: '资方名称', type: 'select', val: '', key: 'capitalId'},
        {name: '日期筛选', type: 'picker', val: [], key: ['beginDate', 'endDate']},
    ],
    searchVal: {},
    dataSource: [],
    columns: [
        {title: '日期', dataIndex: 'date', key: 'date'},
        {title: '日回款金额', dataIndex: 'backMoney', key: 'backMoney'},

        {title: '累计回款金额', dataIndex: 'totalBackMoney', key: 'totalBackMoney'},
        {title: '平均回款金额', dataIndex: 'avgBackMoney', key: 'avgBackMoney'},
    ],
    userList: [],
    regionList: [],
    pickUpList: [],
    groupList: [],
})
onMounted(() => {
    capitalList({page: 1, pageSize: 100000}).then(res => {
        let data = res.data.items
        params.searchData.map(item => {if(item.key === 'capitalId') item.data = data})
    })
    getList()
})
const onShowPageChange = (page) => {
    params.page = page
    getList()
}
const onShowSizeChange = (current, pageSize) => {
    params.pageSize = pageSize;
    getList()
}
const getList = () => {
    let data = {
        ...params.searchVal,
        page: params.page,
        pageSize: params.pageSize,
    }
    getStatistics(data).then(res => {
        params.counts = res.data.counts
        params.dataSource = res.data.items
        params.total = res.data.total
    })
}
const getDate = (arr) => {
    console.log(arr)
    let str = []
    arr && arr.map(item=>{
        if(item) str.push(item)
    })
    return str.join(' 至 ')
}
const getSearch = (e) => {
    params.searchVal = e
    getList()
}
</script>
<style scoped lang="less">
@import './style.less';
</style>
